<template>
  <div style="width:98%;">
    <ve-scatter 
    :data="chartData" 
    :settings="chartSettings"
    :data-zoom="dataZoom" 
    :toolbox="toolbox"></ve-scatter>
  </div>
</template>
<script>
export default {
  name: "chartScatter",
  data() {
    this.dataZoom = [
      {
        type: "slider",
        start: 0,
        end: 100
      }
    ];
    this.toolbox = {
      feature: {
        saveAsImage: {}
      }
    }
    this.chartSettings = {
      dataType: {
        '领料': 'KMB',
        '用料': 'percent',
        '余量': 'normal'
      }
    }
    return {
      chartData: {
        columns: ['日期', '领料', '用料', '余量'],
        rows: {
          '土豆': [
            { '日期': '1月1日', '领料': 123, '用料': 3, '余量': 1244 },
            { '日期': '1月2日', '领料': 1223, '用料': 6, '余量': 2344 },
            { '日期': '1月3日', '领料': 7123, '用料': 9, '余量': 3245 },
            { '日期': '1月4日', '领料': 4123, '用料': 12, '余量': 4355 },
            { '日期': '1月5日', '领料': 3123, '用料': 15, '余量': 4564 },
            { '日期': '1月6日', '领料': 2323, '用料': 20, '余量': 6537 }
          ],
          '土豆泥': [
            { '日期': '1月1日', '领料': 123, '用料': 3, '余量': 1244 },
            { '日期': '1月2日', '领料': 1273, '用料': 6, '余量': 2344 },
            { '日期': '1月3日', '领料': 3123, '用料': 15, '余量': 4564 },
            { '日期': '1月4日', '领料': 2123, '用料': 9, '余量': 3245 },
            { '日期': '1月5日', '领料': 4103, '用料': 12, '余量': 4355 },
            { '日期': '1月6日', '领料': 7123, '用料': 10, '余量': 3567 }
          ],
          '腊肉': [
            { '日期': '1月1日', '领料': 123, '用料': 3, '余量': 1244 },
            { '日期': '1月2日', '领料': 1223, '用料': 6, '余量': 2344 },
            { '日期': '1月3日', '领料': 2123, '用料': 30, '余量': 3245 },
            { '日期': '1月5日', '领料': 4123, '用料': 12, '余量': 4355 },
            { '日期': '1月4日', '领料': 5123, '用料': 18, '余量': 4564 },
            { '日期': '1月6日', '领料': 3843, '用料': 30, '余量': 4850 }
          ]
        }
      }
    }
  }
};
</script>
